import { useEffect, useRef, useState } from 'react';
import { resourcePath } from '../../../../../../../utils/resource';
import Example from '../../example';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import { Button, Table } from 'antd';
import { Style, Icon } from 'ol/style'
import { createLayer, dataToFeature, navByWkt } from '../../../../../../../utils/helper/mapHelper';
export default function Dzsbao(props) {
    const [datas, setDatas] = useState();
    const [params, setParams] = useState({
        pageSize: 5,
        pageNum: 1,

    });
    const [layers, setLayers] = useState();
    const map = useBusinessMap();
    const [total, setTotal] = useState();
    useEffect(() => {
        JcyjApi.sbao_detail(params).then(resp => {
            setDatas(resp.rows);
            setTotal(resp?.total);
        });
    }, [params])
    // console.log('datas', datas)
   
    

    return <div>
        <div style={{
            background: `url(${resourcePath.blockTitleBg})`,
            height: 36,
            backgroundSize: '100% 100%',
            fontSize: 18,
            lineHeight: '36px',
            paddingLeft: 12,
            fontWeight: "bold"
        }}>
            地震速报(<span>{total}</span>)
        </div>
        <div style={{
            padding: 12
        }}>
            <Table style={{
                // height: 233
            }}
                columns={[{
                    title: '地点',
                    dataIndex: 'ckdd',
                    ellipsis: true

                },
                {
                    title: '时间',
                    dataIndex: 'fzsj',
                    ellipsis: true

                },

                {
                    title: '深度',
                    dataIndex: 'sd',
                    align: 'center',
                    ellipsis: true

                },
                {
                    width: 80,
                    align: "center",
                    render: (text, record) => {
                        return <Button type="link" size="small" onClick={e => {
                            if (record.geom) {
                                navByWkt(record.geom, map)
                               
                            }
                            props.onDetail?.(record);
                            //console.log("2",record)
                        }}>快速评估</Button>
                    }
                }
                ]}
                // expandable={{
                //     expandedRowRender,
                //     onExpand: handleRowExpand,
                //     expandedRowKeys,
                //   }}

                dataSource={datas}
                size="small"
                bordered
                onRow={record => {
                    return {
                        onClick: e => {
                            if (record.shp) {
                                navByWkt(record.shp, map)
                            }
                        }
                    }
                }}
                pagination={{
                    current: params.pageNum,
                    pageSize: params.pageSize,
                    total,
                    simple: true,
                    onChange: (page) => {
                        setParams(params => {
                            return {
                                ...params,
                                pageNum: page
                            }
                        })
                    }
                }}
            />
        </div>
    </div>;
}